﻿<style>
    .layui-form-item .layui-input-inline {
        width: 280px;
    }

    label.required:after { /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
        content: '*';
        color: red;
    }
</style>

<link rel="stylesheet" href="../../js/lay-module/step-lay/step.css" media="all">
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                        <div carousel-item>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label  required">对接名称:</label>
                                        <div class="layui-input-block">
                                            <input name="dockName" lay-verify="required" type="text" placeholder="请输入对接逻辑名称" class="layui-input" />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">收到的信息:</label>
                                        <div class="layui-input-block">
                                            <input name="robotMsg" type="text" lay-verify="required" placeholder="请添写机器人发送的信息" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">回复的信息:</label>
                                        <div class="layui-input-block">
                                            <input name="relyMsg" type="text" value="recv" lay-verify="required" placeholder="给机器人回复的信息" class="layui-input required" required>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">重试次数:</label>
                                        <div class="layui-input-block">
                                            <input type="number" name="retries" placeholder="请填写执行不成功时需要重试的次数" class="layui-input required" lay-verify="number">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">最后一步:</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="IsLast" lay-filter="levelM" value="false" title="否" checked>
                                            <input type="radio" name="IsLast" lay-filter="levelM" value="true" title="是">

                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="formStep">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">动作对象:</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="targetType" lay-filter="Dtype" value="robot" title="机器人">
                                            <input type="radio" name="targetType" lay-filter="Dtype" value="device" title="设备" checked>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">对象列表:</label>
                                        <div class="layui-input-block">
                                            <select name="target" id="target" required lay-search>
                                                <option value="">self</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">动作名称:</label>
                                        <div class="layui-input-block">
                                            <select id="actionName" lay-filter="actionName" name="actionName" required lay-search>
                                                <option value="">请选择动作名称</option>
                                                <option value="write">Write</option>
                                                <option value="check">Check</option>
                                                <option value="caseRoute">CaseRoute</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">地址:</label>
                                        <div class="layui-input-block">
                                            <input type="text" lay-verify="required" placeholder="请选择地址名称" name="address" class="layui-input" />
                                        </div>
                                    </div>
                                    <div class="layui-form-item" id="itemvalueType">
                                        <label class="layui-form-label required">参数类型:</label>
                                        <div class="layui-input-block">
                                            <select id="valueType" name="valueType" required lay-search>
                                                <option value="">请选择参数类型</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item" id="valueitem">
                                        <label class="layui-form-label required">参数值:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="value" placeholder="请输入参数值" class="layui-input required" required />
                                        </div>
                                    </div>
                                    <div class="layui-form-item" id="switchcase" style="width:800px" hidden>
                                        <div>
                                            <label class="layui-form-label">SwitchCase:</label>
                                            <input class="layui-btn" type="button" value="+" id="addcase" />
                                            <input class="layui-btn" type="button" value="-" id="removecase" />
                                        </div>

                                        <div class="layui-input-block" id="caselist" style="max-width:540px">
                                            <input type="number" placeholder="参数值" style="width:50px;" required lay-verify="positiveNumberRequiredTrue" />
                                            <span> = </span>
                                            <input type="text" placeholder="路径" style="width:50px" required />

                                            <input type="number" placeholder="参数值" lay-verify="positiveNumberRequiredTrue" style="width:50px;margin-left:10px" />
                                            <span> = </span>
                                            <input id="lastcase" type="text" placeholder="路径" style="width:50px" required />
                                        </div>




                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                &emsp;确认添加&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        添加成功
                                    </div>
                                    <div style="font-size: 14px;color: #666;margin-top: 20px;">后台会自动运行</div>
                                </div>
                                <div style="text-align: center;margin-top: 50px;">
                                    <button class="layui-btn next">再添加一个</button>
                                    <button class="layui-btn layui-btn-primary observal">查看列表</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div style="color: #666;margin-top: 30px;margin-bottom: 40px;padding-left: 30px;">
                        <h3>说明</h3><br>
                        <h4>机器人Socket信息</h4>
                        <p>每个对接动作都是由机器人发送Socket信息发起，如到达、对接完成、电机动作、接送完成、离开等动作机器人发送的Socket信息</p>
                        <br><h4>对接动作</h4>
                        <p>对接动作是机器人Socket发起后，需要机器人给设备信息的动作，这些动作可以一个socket信息对应多个，例如，机器人到达后，通知设备设备放下档杆，电机转动这就对应两个动作，当然这也可以归纳为一个动作。具体看实际情况。</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    layui.use(['form', 'step', 'layer'], function () {
        var $ = layui.$,
            form = layui.form,
            step = layui.step;
        layer = layui.layer;
        var deviceAction = { "Write": "write", "Check": "check", "CaseRoute": "caseRoute" };
        var robotAction = { "Output": "Write", "CheckInput": "check", "Route": "route", "TargetRoute": "target" }

        //初始化表单
        form.render();

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '机器人Socket信息'
            }, {
                title: '对接动作设置'
            }, {
                title: '完成'
            }]
        });

        //校验
        form.verify({
            positiveNumberRequiredTrue: function (value, item) {
                if (!$("#switchcase").is(":hidden") && !/^(([0-9]+[\.]?[0-9]+)|[0-9])$/.test(value)) {
                    return "只能填写正数";
                }

            },
            ParamNumberRequiredTrue: function (value, item) {
                if (($("#switchcase").is(":hidden")) && !/^(([0-9]+[\.]?[0-9]+)|[0-9])$/.test(value)) {
                    return "参数只能填写正数";
                }
            }
        });

        //动态添加下拉框 数据类型
        $.ajax({
            type: 'get',
            url: 'api/Logical/GetDataType',
            dataType: 'json',
            success: function (res) {
                $("#valueType").html("");
                $.each(res.data, function (key, val) {
                    var option1 = $("<option>").val(val).text(key);
                    //通过LayUI.jQuery添加列表项
                    $("#valueType").append(option1);
                });
                form.render('select');
                $("#valueType").get(0).selectedIndex = 4;
            }
        });

        //动态加载 设备列表
        $.ajax({
            type: 'get',
            url: 'api/Device/GetDeviceInfos',
            dataType: 'json',
            success: function (res) {
                $("#target").html("");
                $.each(res.data, function (key, val) {
                    var option1 = $("<option>").val(key).text(key);
                    //通过LayUI.jQuery添加列表项
                    $("#target").append(option1);
                });
                form.render('select');
                $("#target").get(0).selectedIndex = 0;
            }
        });


        //点击添加按钮添加Case
        $("#addcase").click(function () {
            var caseElement = '<input type="number" placeholder="参数值" lay-verify="positiveNumberRequiredTrue" style="width: 50px;margin-left:10px" />' +
                ' <span> = </span>' +
                ' <input id="lastcase" type="text" placeholder="路径" style="width: 50px"  />';
            console.log("按下");
            $("#caselist").append(caseElement);

        });

        //点击删除按钮添加Case
        $("#removecase").click(function () {

            $("#caselist input").last().remove();
            $("#caselist span").last().remove();
            $("#caselist input").last().remove();

        });


        //监听多选框点击事件  来监听
        form.on('radio(Dtype)', function (data) {
            var value = data.value;   //  当前选中的value值
            console.log(value);
            if (value == "device") {　　　　　　//判断当前多选框是选中还是取消选中
                //动态添加下拉框 设备
                $.ajax({
                    type: 'get',
                    url: 'api/Device/GetDeviceInfos',
                    dataType: 'json',
                    success: function (res) {
                        $("#target").html("");
                        $.each(res.data, function (key, val) {
                            var option1 = $("<option>").val(key).text(key);
                            //通过LayUI.jQuery添加列表项
                            $("#target").append(option1);
                        });
                        form.render('select');
                        $("#target").get(0).selectedIndex = 0;
                    }
                });

                $("#actionName").html("");
                $.each(deviceAction, function (key, val) {
                    var option1 = $("<option>").val(val).text(key);
                    //通过LayUI.jQuery添加列表项
                    $("#actionName").append(option1);
                });
                form.render('select');
                $("#actionName").get(0).selectedIndex = 0;
                $('#itemvalueType').removeAttr("hidden");
            }
            else {
                //参数切花显示
                $('#valueitem').removeAttr("hidden");
                $('#switchcase').prop("hidden", "hidden");

                //参数类型
                $('#itemvalueType').prop("hidden", "hidden");
                $("#target").html(""); //清空原来数据
                var option2 = $("<option>").val("self").text("Self");//
                var option3 = $("<option>").val("available").text("Available");
                $("#target").append(option2);
                $("#target").append(option3);
                ////动态添加下拉框 机器人
                $.ajax({
                    type: 'get',
                    url: 'api/Robot/GetRobotInfos',
                    dataType: 'json',
                    success: function (res) {

                        console.log(res.data);
                        $.each(res.data, function (key, val) {
                            var option1 = $("<option>").val(val.id).text(val.id);
                            //通过LayUI.jQuery添加列表项
                            $("#target").append(option1);
                        });

                        form.render('select');
                        $("#target").get(0).selectedIndex = 0;
                    }
                });
                $("#actionName").html("");
                $.each(robotAction, function (key, val) {
                    var option1 = $("<option>").val(val).text(key);
                    //通过LayUI.jQuery添加列表项
                    $("#actionName").append(option1);
                });
                form.render('select');
                $("#actionName").get(0).selectedIndex = 0;
            }

        });

        //动作类型下拉框
        form.on('select(actionName)', function (data) {
            var value = data.value;   //  当前选中的value值
            console.log(value);
            if (value === "caseRoute") {
                $('#switchcase').removeAttr("hidden");
                $('#valueitem').prop("hidden", "hidden");
            } else {
                $('#valueitem').removeAttr("hidden");
                $('#switchcase').prop("hidden", "hidden");
            }
        }
        )

        var dictdata;
        form.on('submit(formStep)', function (data) {
            step.next('#stepForm');
            console.log(data.field);
            dictdata = data.field;
            dictdata.BaseActions = new Array()
            console.log(dictdata);
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            step.next('#stepForm');
            var baseaction = data.field;
            console.log($("#actionName").val());
            if ($("#actionName").val() == "caseRoute") {
                baseaction.Cases = {};
                $("#caselist > input[type='number']").each(function () {
                    var key = $(this).val();
                    var value = $(this).nextAll('input').first().val();
                    eval("baseaction.Cases." + value + "=" + key)
                });
                console.log(baseaction.Cases);
            }
            dictdata.BaseActions.push(baseaction);
            return false;
        });

        $('.pre').click(function () {
            console.log("3");
            step.pre('#stepForm');
        });

        $('.next').click(function () {

            step.pre('#stepForm');
        });

        $('.observal').click(function () {

            //动态加载 设备列表
            $.ajax({
                type: 'post',
                url: '/Logical/Add',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(dictdata),
                success: function (res) {

                }
            });
            layer.closeAll();
        });
    })</script>